<template>
    <el-row  class="container-box" >
        <el-form  ref="form" :model="form" label-width="80px">
            <el-form-item label="当前密码">
                <el-input v-model="userInfo.currentPwd" placeholder="请输入当前用户密码"></el-input>
            </el-form-item>
            <el-form-item label="更新密码">
                <el-input show-password v-model="userInfo.newPwd" placeholder="请输入新的用户密码"></el-input>
            </el-form-item>
            <el-form-item label="确认密码">
                <el-input show-password type="password" v-model="userInfo.rNewPwd" placeholder="确认密码"></el-input>
            </el-form-item>

            <el-form-item class="save-btn">
                <el-button type="primary" @click="onSubmit">保存</el-button>
            </el-form-item>
        </el-form>
    </el-row>
</template>

<script type="text/ecmascript-6">
import { defineComponent, ref, reactive } from "vue";
import { ElMessage } from 'element-plus'
import { apiUpdatePwd } from '../../api/index' 

export default defineComponent({
  name: "UpdateUserPwd",
  setup() {
        const userInfo = reactive({
            currentPwd:null,
            newPwd:null,
            rNewPwd:null
        })

        //确认修改
        async function onSubmit(){
            let user_id = JSON.parse(window.sessionStorage.getItem('info')).id
            console.log(user_id)
            // return
            let { currentPwd,newPwd,rNewPwd} = userInfo
            if ( newPwd !== rNewPwd){
                ElMessage.error('两次密码不一致');
                return
            }
            let result = await apiUpdatePwd(currentPwd,newPwd,user_id)
            if ( result.err_code == 200 ){
                userInfo.currentPwd = null
                userInfo.newPwd = null
                userInfo.rNewPwd = null
                ElMessage.success({
                    type:'success',
                    message:'修改成功',
                })
                return
            }
            ElMessage.error(result.message);
        }
        return {
            userInfo,
            onSubmit
        }
  },
});
</script>

<style scoped lang="less" >
.container-box{
    margin: 15px auto;
    width: 90%;
    .el-form{
        width: 100%;

        .save-btn{
            text-align: center;
            /deep/ .el-form-item__content{
                margin: 0px !important;

            }
            .el-button{
                width: 60%;
            }
        }
    }
}
</style>
